
<!-- 操作-->
<style lang="less">
@import '../../../styles/common.less';
</style>
<template>
  <Row>
    <Form :label-width="150" inline>
      <div class='main_item'>
        <div @click="dataShow('actionCodeData')" id="moxx" class="main_item_title">
          <span style="font-weight:bold;" icon="md-arrow-dropdown">案件操作</span>
          <span style="float:right">
            <Icon type="md-arrow-dropdown" id="actionCodeData_icon"></Icon>
          </span>
        </div>
        <div id="actionCodeData" class="main_item_content_block">
          <div style="margin:30px 10px 10px 10px;">
            <span style="font-weight:bold;" icon="md-arrow-dropdown" >锁定案件：</span>
            <span style="font-weight:bold;" icon="md-arrow-dropdown" v-if="lockFlag==='N'">案件未锁定</span>
            <span style="font-weight:bold;" icon="md-arrow-dropdown" v-if="lockFlag==='Y'">案件被锁定</span>
            <Button type="primary" @click="updataLocked" style="margin-left: 10px;" v-if="lockFlag==='N' && collectTaskParams.overdueType != '1'">锁定案件</Button>
            <Button type="primary" @click="updataUnlocked" style="margin-left: 10px;" v-if="lockFlag==='Y' && collectTaskParams.overdueType != '1'">案件解锁</Button>
          </div>
        </div>
      </div>
    </Form>
    <Form action="" method="get" name="exportFile" id="exportFile" enctype="multipart/form-data">
      <input id="id" name="id" type="hidden" />
    </Form>

    <Form :label-width="150" inline>
      <div class='main_item'>
        <div @click="dataShow('actionCodeData')" id="moxx" class="main_item_title">
          <span style="font-weight:bold;" icon="md-arrow-dropdown">手工代扣(逾期信息)</span>
          <span style="float:right">
            <Icon type="md-arrow-dropdown" id="actionCodeData_icon"></Icon>
          </span>
        </div>
        <div id="actionCodeData" class="main_item_content_block">
          <div style="margin:30px 10px 10px 10px;">
              <Table border :columns="columnsFoun" :data="columnDatas" style="width: 100%;"></Table>
          </div>
        </div>
      </div>

    </Form>
    <Form :label-width="150" inline>
         <Modal v-model="modal1" title="请输入代扣金额以及选择通道" @on-ok="okFrom" @on-cancel="cancel" :scrollable="true">
          <div class="withhold-payment-popup-div">
              <div class="withhold-payment-font-div">输入代扣金额：</div>
              <Input v-model="innerCondition.withholdAmout" style="width: 150px" />
          </div>
          <div class="withhold-payment-popup-div">
              <div class="withhold-payment-font-div"> 请选择支付通道:</div>
              <Select v-model="innerCondition.paymentChannel" class="v-select-wrapper" style="width: 150px" @on-change="selectOption" :label-in-value="true">
                  <Option v-for="item in paymentChannelList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
          </div>
          <div style="text-align:center;margin-top:50px;color: red;">
              口袋、渤海支付通道选项无效！
          </div>
      </Modal>
    </Form>
    <Form :label-width="150" inline>
      <Modal v-model="modal2" title="温馨提示" @on-ok="ok2From" @on-cancel="cancel2" :scrollable="true">
            请确认客户姓名：<span style="color:red">{{confirmData.custName}}</span>;<br>
            贷款期数：<span style="color:red">{{confirmData.terms}}</span>;<br>
            选择的 支付通道为：<span style="color:red" v-if="confirmData.paymentChannel == 'BF'">宝付</span>
              <span style="color:red" v-if="confirmData.paymentChannel == 'FASTPAY'">快付通</span>
            ;<br>
            本次申请代扣金额为：<span style="color:red">{{confirmData.withholdAmout}}</span>
        </Modal>
    </form>

  </Row>
</template>

<script>
export default {
  name: 'collect-base-info',
  data () {
    return {
      modal1: false,
      modal2: false,
      index: '',
      lockFlag: '',

      paymentChannelList: [
        {
          value: 'FASTPAY',
          label: '快付通'
        },
        {
          value: 'BF',
          label: '宝付'
        }
      ],
      confirmData: {
        custName: '',
        withholdAmout: '',
        terms: '',
        paymentTotal: '',
        paymentChannel: ''
      },
      innerCondition: {
        custName: '',
        custCardNo: '',
        loanId: '',
        overdueCaseId: '',
        terms: '',
        paymentChannel: '',
        withholdAmout: '',
        paymentTotal: 0
      },
      columnDatas: [],
      columnsFoun: [
        {
          key: 'loanId',
          title: '进件编号',
          align: 'center'
        },
        {
          title: '期数',
          key: 'terms',
          align: 'center'
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '证件号码',
          key: 'custCardNo',
          align: 'center'
        },
        {
          title: '逾期总额',
          key: 'overdueCurrentTotalAmt',
          align: 'center'
        },

        {
          title: '操作',
          key: 'operation',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },

              on: {
                click: () => {
                  vm.modal1 = true
                  vm.innerCondition.loanId = params.row.loanId
                  vm.innerCondition.custName = params.row.custName
                  vm.innerCondition.custCardNo = params.row.custCardNo
                  vm.innerCondition.overdueCaseId = params.row.overdueCaseId
                  vm.innerCondition.terms = params.row.terms
                }
              }
            }, '代扣申请')
          }
        }
      ],
      comptParams: {
        loanId: '',
        overdueCode: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.initData()
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.comptParams.pageNum = pageNum
      vm.initData()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.comptParams.pageSize = pageLength
      vm.initData()
    },
    initData () {
      var vm = this
      vm.comptParams.loanId = this.collectTaskParams.loanId
      vm.comptParams.overdueCode = this.collectTaskParams.overdueCode
      vm.comptParams.custCardNo = this.collectTaskParams.custCardNo
      vm.comptParams.overdueCaseId = this.collectTaskParams.overdueCaseId
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/initialOperationFile', vm.comptParams).then(re => {
        var data = re.data
        console.log(data)
        vm.lockFlag = data.data.lockFlag
        vm.columnDatas = data.data.collectionList || []
        // vm.logData = data.data.list
        // vm.comptParams.total = data.data.total
      }).catch(er => {

      })
    },
    // 锁定案件
    updataLocked () {
      var vm = this
      vm.comptParams.loanId = this.collectTaskParams.loanId
      vm.comptParams.overdueCode = this.collectTaskParams.overdueCode
      vm.comptParams.overdueCaseId = this.collectTaskParams.overdueCaseId
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/updataLocked', vm.comptParams).then(re => {
        vm.lockFlag = 'Y'
        initData()
      }).catch(er => {

      })
    },
    // 解锁案件
    updataUnlocked () {
      var vm = this
      vm.comptParams.loanId = this.collectTaskParams.loanId
      vm.comptParams.overdueCode = this.collectTaskParams.overdueCode
      vm.comptParams.overdueCaseId = this.collectTaskParams.overdueCaseId
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/updataUnlocked', vm.comptParams).then(re => {
        // var data = re.data.data
        vm.lockFlag = 'N'
        initData()
      }).catch(er => {

      })
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    cancel2 () {
      this.$Message.info('Clicked cancel')
    },
    selectOption (value) {
      var vm = this
      vm.confirmData.paymentChannel = value.label
    },
    okFrom () {
      var vm = this
      var withholdAmout = vm.innerCondition.withholdAmout
      if (withholdAmout === '' || withholdAmout == null) {
        this.$Message.warning('请填写代扣金额')
        return
      }
      var reg = /^\d+(?=\.{0,1}\d+$|$)/
      if (!reg.test(withholdAmout)) {
        this.$Message.warning('代扣金额必须为正数')
        return
      }

      vm.modal2 = true
      vm.confirmData.overdueCaseId = this.collectTaskParams.overdueCaseId
      vm.confirmData.custName = vm.innerCondition.custName
      vm.confirmData.paymentChannel = vm.innerCondition.paymentChannel
      vm.confirmData.custCardNo = vm.innerCondition.custCardNo
      vm.confirmData.loanId = vm.innerCondition.loanId
      vm.confirmData.withholdAmout = vm.innerCondition.withholdAmout
      vm.confirmData.paymentTotal = vm.innerCondition.paymentTotal
      vm.confirmData.terms = vm.innerCondition.terms
    },
    ok2From () {
      this.innerCondition.overdueCaseId = this.collectTaskParams.overdueCaseId
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/applyWithholding', this.innerCondition).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code === 'success') {
          // vm.initData()
          this.$Message.warning('发起代扣申请成功')
        } else {
          this.$Message.warning(message)
        }
      }).catch(er => {

      })
    },
    dataShow: function (tagId) {
      var clickTag = document.getElementById(tagId)
      if (clickTag.className === 'main_item_content') {
        clickTag.className = 'main_item_content_block'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropup'
      } else {
        clickTag.className = 'main_item_content'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropdown'
      }
    }

  },
  props: {
    collectTaskParams: Object
  }

}
</script>
